<template>
    <div class="role">
        <Row>
            <Col span="22">
            <Form ref="formInline" inline>
                <FormItem>
                    <Input placeholder="请输入角色名称查找" style="width: 300px" v-model="keyword" @on-change="onSeach"/>
                </FormItem>                              
            </Form>
            </Col>
            <Col span="2" style="text-align:right">
                <Button type="primary" icon="md-add" style="width:100px" ghost @click="showAddModel">录入</Button>
            </Col>
        </Row>           
        <Table :loading="loading" :columns="columns" :data="datas" stripe border size="small" height="600" highlight-row ref="table" style="margin-bottom:10px;"></Table>
        
        <Button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> 导出原始数据</Button>
        <Button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> 导出排序和过滤数据</Button>
        <Button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> 导出所有分页数据</Button>
        <div style="float: right;">
            <Page :total="dataCount" :current="1" @on-change="changePage" @on-page-size-change="changePageSize" show-sizer :page-size-opts="[20,30,50,100]"></Page>
        </div>        
        <Modal v-model="roleDialog.show" :title="roleDialog.title"  footer-hide width="600">
            <RoleInfo @updateRoleList="getRoleList" :formValidate="formValidate" @closeDialog="closeDialog"></RoleInfo>
        </Modal>
    </div>
</template>

<script>
import RoleInfo from './role/RoleInfo'

export default {
    name: 'role',
    data () {
            return {   
                loading: false,   
                columns: [
                    {
                        type: 'index',
                        width:60,
                        align: 'center'
                    },                    
                    {
                        title: '角色名称',
                        width: 180,
                        key: 'role_name'
                    },
                    {
                        title: '描述',
                        width: 120,
                        key: 'description'
                    },
                    {
                        title: '录入时间',
                        width: 180,
                        key: 'create_time'
                    },
                    {
                        title: '操作',
                        width: 150,
                        key: 'date',
                        fixed: 'right',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.ShowEditModel(params);                                            
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.onRemove(params)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                datas: [],
                dataAll:[],
                dataCount:0,
                page:1,
                pageSize: 20,
                keyword:'',
                roleDialog: {
                    show: false,
                    title: ''
                },
                formValidate: {
                    id:'',            
                    role_name: '',
                    description: ''
                }
            }
        },       
        components: {            
            RoleInfo
        },
        created: function(){
            this.getRoleList()            
        },       
        methods: {
            showAddModel(){
                for(let key in this.formValidate){
                    this.formValidate[key] ='';
                }
                this.roleDialog.show = true;
                this.roleDialog.title = '录入信息';
            },
            ShowEditModel(params){
                this.roleDialog.show = true;
                this.roleDialog.title = '编辑信息';

                this.formValidate.id = params.row.id;
                this.formValidate.user_name = params.row.role_name;
                this.formValidate.cn_name = params.row.description;                            
            },            
            exportData (type) {
                if (type === 1) {
                    this.$refs.table.exportCsv({
                        filename: '导出原始数据'
                    });
                } else if (type === 2) {
                    this.$refs.table.exportCsv({
                        filename: '导出筛选或排序后数据',
                        original: false
                    });
                }else if (type === 3) {
                    this.$refs.table.exportCsv({
                        filename: '导出所有分页数据',                        
                        columns: this.columns,
                        data: this.dataAll
                    });
                }
            },
            getRoleList: function(){
                this.loading = true;
                var that = this;    
                that.$axios.get('http://localhost/public/api/role?page='+ that.page +'&page_count='+ that.pageSize +'&keyword='+ that.keyword)
                .then(function (response) {                     
                    that.datas = response.data.datas;  
                    that.dataAll = response.data.dataAll;
                    that.dataCount = response.data.dataCount;                 
                })
                .catch(function (error) {
                    console.log(error);
                });
                this.loading = false;
            },                        
            changePage :function(n) {
                this.page = n;               
                this.getRoleList();
            },
            changePageSize :function(n) {
                this.pageSize = n;               
                this.getRoleList();
            },
            onSeach: function(){
                this.getRoleList();
            },
            onRemove: function(params){
                var that = this;
                that.$Modal.confirm({
                    title: '确定要删除吗？',                   
                    onOk: () => {
                        that.$axios.get('http://localhost/public/api/role/delete?id=' + params.row.id)
                            .then(function (response) { 
                                that.$Message.info('删除成功!');                      
                                that.getRoleList();
                            })
                            .catch(function (error) {
                                this.$Message.error('删除失败!');         
                            });
                    }
                });
            },
            closeDialog: function(){
                this.roleDialog.show = false;
                this.roleDialog.title = '';
            }    
        }
    
}
</script>
